import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import {
  Carousel,
  Card,
  Row,
  Tooltip,
  Form,
  Icon,
  Progress,
  Statistic, BackTop, Drawer, Select,
} from 'antd';
import {arrTrans ,renderValueStatus} from '@/utils/utils';
import ReactEcharts from 'echarts-for-react';
import themeObj from './chalk.json';
import debounce from 'lodash/debounce';
import sortBy from 'lodash/sortBy';
import echarts from 'echarts';
import 'react-clock/dist/Clock.css';
import styles from './index.less';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import GridLayout from 'react-grid-layout';
import 'react-calendar/dist/Calendar.css';
import Calendar from 'react-calendar';
import CountUp from 'react-countup';
import Clock from 'react-clock';
import Ranking from './ranking';
import Detail from '../Meters/Detail';
import titleRight from './../../images/title-right.png'
import titleLeft from './../../images/title-left.png'
import shuibiao from './../../images/shuibiao2.png'
import yongshuiliang from './../../images/yongshuiliang.png'
import yongshuiliang_pre from './../../images/yongshuiliang_pre.png'
const Option = Select.Option;
echarts.registerTheme('my_theme', themeObj);


var lastMonth = [];
for (var i = 0; i < 30; i++) {
  lastMonth.unshift(new Date(new Date()
    .setDate(new Date().getDate() - i))
    .toLocaleDateString());
}

function getFromLS(key) {
  let ls = {};
  try {
    ls = JSON.parse(localStorage.getItem('rgl-7')) || {};
  } catch (e) {
    /*Ignore*/
  }
  return ls[key];
}

function saveToLS(key, value) {
  localStorage.setItem(
    'rgl-7',
    JSON.stringify({
      [key]: value,
    }),
  );
};

@connect(({ homeData, loading }) => ({
  homeData,
}))
@Form.create()
class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    // this.echarts = window.echarts;
    this.myChart = [];
    this.state = {
      date: new Date(),
      clock_date: new Date(),
      showMore: true,
      autoplay: true,
      offsetWidth: 0,
      carouselH: 0,
      boxH2: 0,
      boxH: 0,
      editRecord:{},
      focusPerPage:  localStorage.getItem('focusPerPage')?localStorage.getItem('focusPerPage'):'4',
      layout: getFromLS('layout') || [{
        static: true,
          'w': 3,
          'h': 3,
          'x': 0,
          'y': 0,
          'i': 'a',
          'minW': 3,
          'minH': 3,

        }, { 'w': 3, 'h': 1, 'x': 3, 'y': 2, 'i': 'd',   }, {
          'w': 3,
          'h': 1,
          'x': 3,
          'y': 0,
          'i': 'b',
        }, { 'w': 3, 'h': 1, 'x': 3, 'y': 1, 'i': 'c',   }, {
          'w': 4,
          'h': 3,
          'x': 6,
          'y': 0,
          'i': 'e',
        }, { 'w': 5, 'h': 3, 'x': 0, 'y': 6, 'i': 'i',   }, {
          'w': 5,
          'h': 3,
          'x': 0,
          'y': 3,
          'i': 'f',
        }, { 'w': 7, 'h': 3, 'x': 5, 'y': 3, 'i': 'g',   }, {
          'w': 4,
          'h': 3,
          'x': 5,
          'y': 6,
          'i': 'h',
        }, { 'w': 2, 'h': 3, 'x': 10, 'y': 0, 'i': 'j',   }, {
          'w': 3,
          'h': 3,
          'x': 9,
          'y': 6,
          'i': 'k',
        }, { 'w': 3, 'h': 3, 'x': 9, 'y': 6, 'i': 'l',   }],
      IsFull: this.IsFull(),

    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const {
      homeData: { pageLoaded, scrollData },
    } = this.props;
    console.log('pageLoaded', pageLoaded);
    console.log('scrollData', scrollData);
    const table = document.querySelector('.homePage');
    if (pageLoaded) {
      setTimeout(function() {
        console.log('table', table);
        table.scrollTop = scrollData.y;
        table.scrollLeft = scrollData.x;
      }, 0);
      // this.dynamic();
      // this.dynamic2()

    } else {
      const {} = this.props;
      // dispatch({
      //   type: `homeData/changeLoaded`,
      // });
      dispatch({
        type: 'homeData/fetch',
        payload: {},
        callback: () => {
          // this.dynamic()
          // this.dynamic2()
          const { dispatch } = this.props;
          dispatch({
            type: `homeData/changeLoaded`,
          });
        },
      });
    }

    window.addEventListener('resize', this.resize);
    table.addEventListener('scroll', debounce(this.scroll, 150));


    setInterval(
      () => this.setState({ clock_date: new Date() }),
      1000,
    );
    this.changeCustomH();

  }

  changeCustomH = () => {
    this.setState({
      homeWidth: document.querySelector('.homePage').offsetWidth - 30,
      carouselH: document.querySelector('.carouselH').offsetHeight - 51,
    });
    if (document.querySelector('.error-box')) {
      this.setState({
        boxH2: document.querySelector('.error-box').offsetHeight - 65,
      });
    }
    if (document.querySelector('.rank-box')) {
      this.setState({
        boxH: document.querySelector('.rank-box').offsetHeight - 100,
      });
    }
  };
  resize = () => {
    this.changeCustomH();
    this.changeTableY();
    this.resizeChart()
  };
  changeTableY = () => {
    this.setState({
      tableY: 500,
    });
  };
  resizeChart = () => {
    this.setState({
      IsFull: this.IsFull(),
    });
  };
  scroll = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'homeData/changeScroll',
      payload: {
        x: e.target.scrollLeft,
        y: e.target.scrollTop,
      },
    });
  };

  componentWillUnmount() {
    const table = document.querySelector('.homePage');
    console.log('table', table);
    table.removeEventListener('scroll', debounce(this.scroll, 300));
    console.log('componentWillUnmount');
    window.removeEventListener('resize', this.resize);
  }

  componentWillReceiveProps = (nextProps) => {

  };
  getOption = () => {
    const {
      homeData: { data },

    } = this.props;
    if(data.date_range_consumption.length===0){
      return {}
    }
    let xdata = [];
    let ydata = [];
    for (let i = 0; i < data.date_range_consumption.length; i++) {
      xdata.push(data.date_range_consumption[i].date)
      ydata.push(parseFloat(data.date_range_consumption[i].cold_meter.consumption))
    }
    let option = {
      "backgroundColor": "rgba(28,28,28,0)",
      tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow',        // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        right: '7%',
        top: '0',
        textStyle: {
          fontSize: 12,
          color: '#F1F1F3',
        },
        data: ['用水量'],
      },
      grid: {
        top: '4%',
        left: '4%',
        right: '7%',
        bottom: '4%',
        containLabel: true,
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} (m3)',
        },
      },
      xAxis: {
        type: 'category',
        data: xdata,

      },
      series: [
        {
          name: '用水量',
          type: 'bar',
          stack: '总量',
          data: ydata,
        },
      ],
    };
    return option;


  };
  getOption2 = () => {
    const {
      homeData: { data },
    } = this.props;
    let xdata = [];
    let ydata = [];
    if(data.date_range_status_analysis.length===0){
      return {}
    }
    for (let i = 0; i < data.date_range_status_analysis.length; i++) {
      xdata.push(data.date_range_status_analysis[i].date)
      ydata.push(parseFloat(data.date_range_status_analysis[i].normal_upload_rate))
    }
    let option = {
      "backgroundColor": "rgba(28,28,28,0)",
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        icon: 'rect',
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 13,
        right: '7%',
        top: '0',
        textStyle: {
          fontSize: 12,
          color: '#F1F1F3',
        },
      },
      grid: {
        top: '4%',
        left: '3%',
        right: '4%',
        bottom: '4%',
        containLabel: true,
      },
      xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: xdata,
      }],
      yAxis: [{
        type: 'value',
        minInterval: 1,
        max:100,
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: '{value} (%)',
        },
      }],
      series: [{
        name: '上传率',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#00ffc6',
            }, {
              offset: 0.8,
              color: 'rgb(0,140,255)',
            }], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10,
          },
        },
        itemStyle: {
          color: 'rgb(0,140,255)',
        },
        data:ydata,

      }],
    };
    return option;


  };
  dynamic = () => {
    const {
      homeData: { data },

    } = this.props;
    if(data.date_range_status_analysis.length===0){
      return {}
    }
    let date = {
      normal_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length-1].normal_upload_count ),
      error_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length-1].error_upload_count ),
      missing_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length-1].missing_upload_count ),
      waiting_upload_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length-1].waiting_upload_count ),
      reading_faill_count: parseFloat(data.date_range_status_analysis[data.date_range_status_analysis.length-1].reading_faill_count),
      total_count: data.date_range_status_analysis[data.date_range_status_analysis.length-1].total_count,
    };
    let option = {
      "backgroundColor": "rgba(28,28,28,0)",
      legend: {
        orient: 'vertical',
        show: true,
        right: '10%',
        y: 'center',
        itemWidth: 3,
        itemHeight: 30,
        itemGap: 10,
        textStyle: {
          color: '#d9e0f6',
          fontSize: 16,
          lineHeight: 20,
          rich: {
            percent: {
              color: '#00ffc6',
              fontSize: 18,
            },
          },
        },
        formatter: name => {
          switch (name) {
            case '正常':
              return (
                `正常 ${date.normal_upload_count} \n{percent|${((date.normal_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '错报':
              return (
                `错报 ${date.error_upload_count} \n{percent|${((date.error_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '漏报':
              return (
                `漏报 ${date.missing_upload_count} \n{percent|${((date.missing_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '未上报':
              return (
                `未上报 ${date.waiting_upload_count} \n{percent|${((date.waiting_upload_count / date.total_count) * 100).toFixed(2)}%}`
              );
            case '抄表失败':
              return (
                `抄表失败 ${date.reading_faill_count} \n{percent|${((date.reading_faill_count / date.total_count) * 100).toFixed(2)}%}`
              );
            default:
              break;
          }
        },
      },
      tooltip: {
        show: true,
      },
      series: [
        {
          type: 'pie',
          radius: ['65%', '75%'],
          center: ['40%', '50%'],
          hoverAnimation: false,
          z: 10,
          label: {
            position: 'center',
            formatter: () => {
              return `水表总数\r\n${date ? date.total_count : 0} 个`;
            },
            rich: {
              total: {
                fontSize: 30,
                color: '#fff',
              },
            },
            color: '#b6cfe7',
            fontSize: 16,
            lineHeight: 30,
          },
          data: [
            {
              value: date.normal_upload_count,
              name: '正常',
              itemStyle: {
                color: '#0286ff',
              },
            },
            {
              value: date.error_upload_count,
              name: '错报',
              itemStyle: {
                color: '#fb5274',
              },
            },
            {
              value: date.missing_upload_count,
              name: '漏报',
              itemStyle: {
                color: '#ffd302',
              },
            },
            {
              value: date.waiting_upload_count,
              name: '未上报',
              itemStyle: {
                color: '#adadad',
              },
            },
            {
              value: date.reading_faill_count,
              name: '抄表失败',
              itemStyle: {
                color: '#da0422',
              },
            },
          ],
          labelLine: {
            show: false,
          },
        },
        {
          type: 'pie',
          radius: ['54%', '64%'],
          center: ['40%', '50%'],
          hoverAnimation: false,
          label: {
            show: false,
          },
          data: [
            {
              value: date.normal_upload_count,
              name: '正常',
              itemStyle: {
                color: '#0286ff',
                opacity: 0.5,
              },
            },
            {
              value: date.error_upload_count,
              name: '错报',
              itemStyle: {
                color: '#fb5274',
                opacity: 0.5,
              },
            },
            {
              value: date.missing_upload_count,
              name: '漏报',
              itemStyle: {
                color: '#ffd302',
                opacity: 0.5,
              },
            },
            {
              value: date.waiting_upload_count,
              name: '未上报',
              itemStyle: {
                color: '#adadad',
                opacity: 0.5,
              },
            },
            {
              value: date.reading_faill_count,
              name: '抄表失败',
              itemStyle: {
                color: '#da0422',
                opacity: 0.5,
              },
            },
          ],
          labelLine: {
            show: false,
          },
        },
        {
          type: 'pie',
          radius: ['43%', '53%'],
          center: ['40%', '50%'],
          hoverAnimation: false,
          label: {
            show: false,
          },
          data: [
            {
              value: date.normal_upload_count,
              name: '正常',
              itemStyle: {
                color: '#0286ff',
                opacity: 0.2,
              },
            },
            {
              value: date.error_upload_count,
              name: '错报',
              itemStyle: {
                color: '#fb5274',
                opacity: 0.2,
              },
            },
            {
              value: date.missing_upload_count,
              name: '漏报',
              itemStyle: {
                color: '#ffd302',
                opacity: 0.2,
              },
            },
            {
              value: date.waiting_upload_count,
              name: '未上报',
              itemStyle: {
                color: '#adadad',
                opacity: 0.2,
              },
            },
            {
              value: date.reading_faill_count,
              name: '抄表失败',
              itemStyle: {
                color: '#da0422',
                opacity: 0.2,
              },
            },
          ],
          labelLine: {
            show: false,
          },
        },
      ],

    };
    return option;
  };
  dynamic2 = () => {
    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    const {
      homeData: { data },

    } = this.props;
    if(data.vendor_analysis.length===0){
      return {}
    }
    let vendor_names=[];
    let total_counts=[]
    for(let i=0;i<data.vendor_analysis.length;i++){
      vendor_names.push(data.vendor_analysis[i].vendor_name)
      total_counts.push({
        name:data.vendor_analysis[i].vendor_name,
        value:data.vendor_analysis[i].total_count
      })
    }
    const objData = array2obj(data, 'name');

    let option = {
      "backgroundColor": "rgba(28,28,28,0)",
      title: {
        show: false,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
      },
      legend: {
        orient: 'vertical',
        left: '2%',
        data:vendor_names,
      },
      series: [
        {
          name: '水表个数',
          type: 'pie',
          radius: '60%',
          center: ['50%', '55%'],
          data: total_counts,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            },
          },
        },
      ],
    };
    return option;
  };
  onChange = date => {
    console.log('date',date)
    this.setState({ date });
    const { dispatch } = this.props;
    dispatch({
      type: 'homeData/changeDate',
      payload: moment(date).format('YYYY-MM-DD'),
      callback: () => {
        dispatch({
          type: 'homeData/fetch',
        });
      },
    });
  };

  onLayoutChange = (layout) => {
    console.log('onLayoutChange');
    saveToLS('layout', layout);
    this.setState({ layout }, function() {
      this.changeCustomH();
    });
  };

  // 判断是否全屏
  IsFull = () => {
    const fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement;
    const fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled;
    if (fullscreenElement == null) {
      return false;
    }
    return true;

  };

  render() {
    const {
      homeData: { data, scrollData, pageLoaded, searchParams },

    } = this.props;
    let percent=0;
    if(data.summary.cold_meter&&data.summary.cold_meter.yesterday_consumption!==0){
      percent=(data.summary.cold_meter.today_consumption-data.summary.cold_meter.yesterday_consumption)/data.summary.cold_meter.yesterday_consumption*100
    }
    return (
      <div className={`homePage ${styles.home}`}
           style={{ height: 'calc(100vh - 98px)', overflow: 'auto', padding: '15px' }}>
        <div className={styles.homePageTop}>
          <i className="fl"><img src={titleLeft} /></i>
          <span className="biaoti fl">水表数据大屏</span>
          <i className="fr"><img src={titleRight} /></i>
        </div>

        <GridLayout draggableHandle={'.draggableHandle'} className="grid-layout" layout={this.state.layout}
                    onLayoutChange={this.onLayoutChange}
                    cols={12} rowHeight={100} width={this.state.homeWidth}>
          <div  key="a" style={{ textAlign: 'center' }}>
            <Calendar
              style={{ height: '100%' }}
              onChange={this.onChange}
              value={new Date(searchParams.date)}
              maxDetail={'month'}
              minDetail={'month'}
              maxDate={new Date()}
            />
          </div>
          <div key="d" className={'draggableHandle'}>
            <div className={`${styles.topItem} `}>
              <div className={styles.image}><img
                src={shuibiao} alt=""/></div>
              <div>
                <div className={styles.count}>
                  {
                    pageLoaded?data.summary.meter_count:
                      <CountUp
                        end={data.summary.meter_count||0}/>
                  }
              </div>
                <div className={styles.explain}>已安装水表总数</div>
              </div>
            </div>
          </div>
          <div key="b" className={'draggableHandle'}>
            <div className={`${styles.topItem} `}>
              <div className={styles.image}><img
                src={yongshuiliang} alt=""/></div>
              <div>
                <div className={styles.count}>
                  {
                    (pageLoaded&&data.summary.cold_meter)?data.summary.cold_meter.today_consumption.toFixed(2):
                      <CountUp
                        end={data.summary.cold_meter?data.summary.cold_meter.today_consumption.toFixed(2):0}/>
                  }
                  <Statistic
                    title=""
                    value={percent}
                    precision={2}
                    valueStyle={{ fontSize:'16px',color: percent>=0?'rgb(2, 255, 165)':'rgb(255,32,13)' }}
                    prefix={<Icon type={percent>=0?'arrow-up':'arrow-down'}/>}
                    suffix="%"
                  />
                </div>
                <div className={styles.explain}>当日用水量 (T)&nbsp;&nbsp;</div>
              </div>
            </div>
          </div>
          <div key="c" className={'draggableHandle'}>
            <div className={`${styles.topItem} `}>
              <div className={styles.image}><img
                src={yongshuiliang_pre} alt=""/></div>
              <div>
                <div className={styles.count}>
                  {
                    (pageLoaded&&data.summary.cold_meter)?data.summary.cold_meter.yesterday_consumption.toFixed(2):
                      <CountUp
                        end={data.summary.cold_meter?data.summary.cold_meter.yesterday_consumption.toFixed(2):0}/>
                  }
                </div>
                <div className={styles.explain}>前一日用水量(T)</div>
              </div>
            </div>
          </div>
          <div key="e">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                近30天水表上传率
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.getOption2()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
          <div key="i">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                近30天各类型水表用水量(m3)
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.getOption()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
          <div key="f">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                水表状态统计
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.dynamic()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
          <div key="g" className={'carouselH'}>
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                重点水表状态
              </h3>

            </div>
            <Select size={'small'} value={this.state.focusPerPage} style={{ width: 100 ,top:'10px',color:'#0286ff'}} className={styles.rank_btn} onChange={(e)=>{
              localStorage.setItem('focusPerPage',e)
              this.setState({
                focusPerPage: e,
              })
            }}>
              <Option value="4">每页4条</Option>
              <Option value="8">每页8条</Option>
            </Select>
            <Carousel >
              {
                arrTrans(Number(this.state.focusPerPage),sortBy(data.focus_meter_analysis,(o)=>{return -o.consumption})).map((item,index)=>{
                  return <div  key={index} ><div className={styles.carousel_box}
                               style={{ width: '100%', height: this.state.carouselH + 'px', color: '#fff' }}>
                    {
                      item.map((item2,index2)=>{
                      return  <div key={index2} className={styles.carousel_item}>
                          <Progress    strokeLinecap="square" width={80} format={percent => `${percent / 100}`} type="dashboard"
                                    percent={(item2.consumption / 1) * 100}/>
                          <div className={styles.carousel_value}>
                            <CountUp decimals={2} end={item2.consumption || 0}/>
                            <div>用水量</div>
                          </div>
                        <Tooltip title={item2.address}>
                          <div className={styles.carousel_name}  onClick={() => {
                            this.setState({
                              infoModal:true,
                              editRecord:item2
                            })
                          }}>{item2.address}</div>
                        </Tooltip>

                          <div className={styles.carousel_data}>
                            <div className={styles.carousel_data_left}>
                              <li>水表号:</li>
                              <li>状态:</li>
                              <li>累计读数: </li>
                              <li> 抄表时间:</li>

                            </div>
                            <div className={styles.carousel_data_right}>
                              <li>
                                <span className={styles.cursor}  onClick={() => {
                                  this.setState({
                                    infoModal:true,
                                    editRecord:item2
                                  })
                                }}>{item2.meter_number}</span>
                              </li>
                              <li>
                                <span>{renderValueStatus(item2.status)}</span>
                              </li>
                              <li>
                                <span>{item2.value}</span>
                              </li>
                              <li>
                                <span>{item2.upload_time}</span>
                              </li>
                            </div>
                          </div>
                        </div>
                      })
                    }
                  </div>
                  </div>
                })
              }
            </Carousel>
          </div>
          <div key="h" className={'rank-box'}>
            <Ranking changeCustomH={this.changeCustomH} boxH={this.state.boxH}
                     rank={data.consumption_ranking}/>
          </div>
          <div key={'j'} className={`${styles.clock} draggableHandle`}>
            <Clock
              value={this.state.clock_date}
              renderNumbers={true}
            />
          </div>
       {/*   <div key="k" className={'error-box'}>
            <ErrorBox changeCustomH={this.changeCustomH} boxH={this.state.boxH2}/>
          </div>*/}
          <div key="l">
            <div className={`${styles.header_title} draggableHandle`}>
              <h3>
                各水表厂安装水表个数
              </h3>
            </div>
            <div className={styles.grid_body}>
              <ReactEcharts
                option={this.dynamic2()}
                style={{ height: '100%', width: '100%' }}
                theme='my_theme'
                //onChartReady={this.onChartReadyCallback}
                //onEvents={EventsDict}
              />
            </div>

          </div>
        </GridLayout>
        <div className={styles.homeFullIcon}
             onClick={() => {
               const element = document.querySelector(".homePage");
               if (this.state.IsFull) {
                 if (document.exitFullscreen) {
                   document.exitFullscreen();
                 } else if (document.mozCancelFullScreen) {
                   document.mozCancelFullScreen();
                 } else if (document.webkitExitFullscreen) {
                   document.webkitExitFullscreen();
                 }
               } else if (element.requestFullscreen) {
                 element.requestFullscreen();
               } else if (element.msRequestFullscreen) {
                 element.msRequestFullscreen();
               } else if (element.mozRequestFullScreen) {
                 element.mozRequestFullScreen();
               } else if (element.webkitRequestFullscreen) {
                 element.webkitRequestFullscreen();
               }
             }}
        >
          <Icon className={styles.homeFullIconContent}         type={this.state.IsFull ? 'fullscreen-exit' : 'fullscreen'} />
        </div>
        <BackTop target={()=>{return document.querySelector('.homePage')}}/>
        <Drawer
          title={`${this.state.editRecord.meter_number} 详情`}
          placement="right"
          destroyOnClose
          onClose={() => {
            this.setState({
              infoModal: false,
              editRecord: {},
            });
          }}

          width={700}
          visible={this.state.infoModal}
        >
          <Detail id={this.state.editRecord.meter_id}></Detail>
        </Drawer>
      </div>
    );
  }
}

export default BasicList;
